<template>
  <div class="tags" :class="!isClose ? 'on' : ''">
    <TagsItem
      v-for="(item, index) in items"
      :key="'tag_' + index"
      :item="item"
      :close="isClose"
    ></TagsItem
    ><input
      v-model="tags"
      :placeholder="$t('lang.添加标签')"
      class="tags_input"
      v-if="isClose"
    />
  </div>
</template>
<script>
export default {
  name: "Tags",
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },
    isClose: {
      type: Boolean,
      default() {
        return true;
      },
    },
  },
  components: {
    TagsItem: () =>
      import(
        /* webpackChunkName:"tagsItem" */ "../../components/common/tagsItem.vue"
      ),
  },
  data() {
    return { tags: "" };
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.tags {
  &.on {
    margin: 10 / @base 0;
  }
  .tagsitem {
    float: left;
    margin: 0 5 / @base 5 / @base 0;
  }
  .tags_input {
    width: 100 / @base;
    margin: 0 0 5 / @base 0;
    border: 1 / @base #efefef solid;
    padding: 2.5 / @base 5 / @base;
    line-height: 20 / @base;
    border-radius: 5 / @base;
  }
}
</style>
